<template>
  <ElCard v-bind="getElProps">
    <template #header v-if="!!widget.elProps.title">
      <div style="display: flex; justify-content: space-between">
        <div>{{ widget.elProps.title }}</div>
        <ElButton type="primary" :icon="CirclePlus" @click="handleAdd" v-if="!designer.global.design">新增</ElButton>
      </div>
    </template>
    <ElRow v-if="widget.elProps.type === 'single'">
      <RenderWidget
        :designer="designer"
        :widget="widget"
        :form-model="subFormModel"
        :form-type="widget.elProps.type"
      ></RenderWidget>
    </ElRow>
    <ElForm ref="subFormRef" label-position="top" v-else-if="designer.global.design && widget.elProps.type === 'multiple'">
      <div style="display: flex; flex-wrap: nowrap">
        <RenderWidget
          :designer="designer"
          :widget="widget"
          :form-model="subFormModel"
          :form-type="widget.elProps.type"
        ></RenderWidget>
      </div>
    </ElForm>
    <div class="table-box" v-else-if="widget.elProps.type === 'multiple'">
      <ElTable :data="subFormModel" border>
        <ElTableColumn type="index" label="#" width="50" />
        <ElTableColumn
          v-for="(item, index) in widget.widgetList"
          :key="item.id"
          :prop="item.id"
          :label="item['formItemProps'].label"
        >
          <template #default="{ row }">
            <component
              :is="getComp(item)"
              :widget="item"
              :designer="designer"
              :parent-widget="widget"
              :index-of-parent-list="index"
              :form-model="row"
            ></component>
          </template>
        </ElTableColumn>
        <ElTableColumn label="操作" width="80">
          <template #default="{ row }">
            <ElButton text type="danger" @click="handleDelete(row)">
              <Icon icon="delete"></Icon>
            </ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
    </div>
  </ElCard>
</template>
<script setup lang="ts" name="SubFormWidget">
import { ElCard, ElButton, ElForm, ElTable, ElRow, ElTableColumn } from "element-plus";
import { CirclePlus } from "@element-plus/icons-vue";
import { Icon } from "@/components/Icon";
import RenderWidget from "../../Layout/RenderSubFormWidget.vue";
import Comps from "../../Widget";
import { computed } from "vue";
import { omit } from "lodash";
const props = defineProps({
  designer: {
    type: Object
  },
  widget: {
    type: Object
  },
  formModel: {
    type: Object
  }
});
const getElProps = computed(() => omit(props.widget!.elProps, ["title"]));
const getComp = item => {
  return Comps[item.type + "Widget"];
};
//添加特殊符号，作为子表的数据标识
const subFormModel = computed(() => {
  const entityId = props.widget!.elProps.entityId;
  if (!props.formModel!["$" + entityId]) {
    if (props.widget!.elProps.type === "multiple") {
      props.formModel!["$" + entityId] = [];
    } else {
      props.formModel!["$" + entityId] = {};
    }
  }
  return props.formModel!["$" + entityId];
});
const handleAdd = () => {
  subFormModel.value.push({});
};
const handleDelete = row => {
  for (let index = 0; index < subFormModel.value.length; index++) {
    if (subFormModel.value[index].id === row.id) {
      subFormModel.value.splice(index, 1);
      break;
    }
  }
};
</script>
